<html>
	<head>
		<link rel="stylesheet" type="text/css" href="fonts/HelveticaNeueBold/HelveticaNeueBold.css" />
		<link rel="stylesheet" type="text/css" href="fonts/HelveticaNeueLight/HelveticaNeueLight.css" />
		<link rel="stylesheet" type="text/css" href="controls.css" />
		<style>
		body{
			margin:0;
			padding:0;
			background-image:url('img-ele/back-mini.png');
		}
		#top{
			background-image:url('img-ele/top.png');
			background-size:100% 50px;
			background-repeat:no-repeat;
			height:43px;
			text-align: center;
			font-family:"HelveticaNeueBold";
			font-size:2em;
			color:white;
			vertical-align:middle;
			padding-top:5px;
		}
		#wrapper{
			min-height:400px;
			width:400px;
			margin:0 auto;
		}
		.item{
			height:44px;
			font-family:"HelveticaNeueLight";
			font-size:1.3em;
			line-height:35px;
		}
		.item-detail{
			float:left;
		}
		.item-action{
			float:right;
			background:url("img-ele/arrow-back.png");
			width:25px;
			height:30px;
			padding-left:12px;
			cursor:hand;
		}
		.item-dest{
			float:right;
			background:url("img-ele/table-dest-back.png");
			width:25px;
			height:30px;
			font-family:"HelveticaNeueBold";
			font-size:18px;
			color:white;
			line-height:25px;
			padding-left:12px;
		}
		
		#message {
			width:400px;
			min-height:60px;
			height:60px;
			margin:0 auto;
			overflow:hidden;
			position:relative;
		}
		#message-inner {
			margin:0px;
			overflow:hidden;
			position:relative;
			height:50px;
		}
		.message-detail{
			text-align:center;
			padding:5px;
			color:red;
			font-family:"HelveticaNeueBold";
			position:absolute;
		}
		
		</style>
	</head>
	<body>
		<script src="jquery-1.4.2.min.js"></script>
		<script src="jquery-ui-1.8.13.custom.min.js"></script>
		<script src="jquery.dimensions.pack.js"></script>
		<script src="jquery.combobox.packed.js"></script>
		<script src="ulti.js"></script>
		<script src="jquery.multiple-bgs.min.js"></script>
		<script src="btn-back.js"></script>
		<script>idv=location.toString().match(/id=([^&]*)/)[1]</script>
		<div id="btn-back" class="btn-back" onclick="window.location='waiter.htm?id='+idv;"></div>
		<div id="top">
			Ready Items
		</div>
		<div id="message" class="panel">
		<div id="message-inner">

		</div>
		</div>
		<div id="wrapper" class="panel">
			<div class="pnl-inner" id="readyitems">
				
			</div>
		</div>
		<script>
		function Message(mess){
			$(".message-detail").animate({"top":"-=23px","opacity":0.5},300)
			var nexttop=parseInt($(".message-detail:last").css("left"))+parseInt($(".message-detail:last").height());
			var html='<div class="message-detail" style="display:none"> '+mess+'</div>';
			$("#message-inner").append(html);
			$(".message-detail:last").css("top",nexttop);
			$(".message-detail:last").fadeIn(300);
		}
		$(document).ready(function(){
			Message("This is message panel!");
		})
		var getReady=true;
		var hasInterval=true;
		var interval=600;
			function loadMenu(){
				var json_path=waiter_service+"MenuList.aspx?logedin=yes";
				$.ajax({
					url:json_path,
					success:function(data){
						eval("dt="+data);
						var cats=dt.Categories.Rows
						Items=dt.MenuItem.Rows
						
						getReadyItem()
					}
				})
			}
			function clearReadyItem(){
				$(".item").remove();
			}
			function addReadyItem(id,name,dest,sid){
				var rid=randomID(10);
				var html=''
					html+='<div class="item" itemName="'+name+'" id="'+rid+'" readyid="'+id+'" marked="'+sid+'">'
						html+='<div class="item-detail">'
							html+=name
						html+='</div>'
						html+='<div class="item-action" onclick="takeItem(this)"></div>'
						html+='<div class="item-dest">'+dest+'</div>'
					html+='</div>'
				
				$("#readyitems").append(html);
				$("#"+rid).hide();
				$("#"+rid).show(200);
			}
			function removeReadyItem(o){
				if(typeof o=="string"){
					
				}
				if(typeof o=="object"){
					if(o.length==0)return;
					var pit=o
					pit.hide(500,function(){
						pit.remove();
					})
				}
			}
			function getReadyItem(){
				if(getReady=false)return;
				var path=waiter_service+"/ReadyItems.aspx?logedin=yes";
				$.ajax({
					url:path,
					cache:false,
					success:function(data){
						eval("dt="+data);
						var items=dt.Rows
						var rid=randomID(5);
						for(var i=0;i < items.length;i++){
							var item=items[i];
							var name="Unknown";
							if($("[readyid="+item.ID+"]").length>0){
								$("[readyid="+item.ID+"]").attr("marked",rid)
								continue;
							}
							for(var j=0;j<Items.length;j++){
								if(item.Product==Items[j].ID){
									name=Items[j].Name;
									break;
								}
							}
							addReadyItem(item.ID,name,item.Table,rid)
						}
						removeReadyItem($(".item[marked!="+rid+"]"));
						if(hasInterval){
							setTimeout(function(){getReadyItem()},interval)
						}else{
							getReadyItem()
						}
					},
					error:function(){
						Message("Connect to service fail");
						setTimeout(function(){getReadyItem()},interval*3);
					}
				})
			}
			function takeItem(o){
				var item=$(o).parent(".item");
				var id=item.attr("readyid");
				var path=waiter_service+"DeliverItem.aspx?logedin=yes&WaiterID="+idv+"&ItemID="+id;
				getReady=false;
				
				$.ajax({
					url:path,
					cache:false,
					success:function(data){
						eval("dt="+data);
						if(dt.Success==true)
						{
							Message("Take item success");
						}else{
							Message("Take item fail, please select other");
						}
						getReady=true;
					},
					error:function(){
						Message("Take item fail, please select other");
						getReady=true;
					}
				})
			}
			loadMenu()
			
		</script>
	</body>
</html>